<template>
	<view id="apps">
		
		
		<!-- header -->
		<view class="header">
			<view class="back">
				<image src="/static/images/CaretLeft.png" mode="widthFix"></image>
			</view>
			<!--<text>商户信息</text>-->
		</view>
		
		
		<!-- info_img -->
		<view class="info_img">
			<image src="/static/images/bn.png" mode="widthFix"></image>
		</view>
		
		
		<!-- 商户介绍 -->
		<view class="shjs_box">
			<view class="box">
				
				
				<!-- logo_box -->
				<view class="logo_box">
					<view class="logo">
						<image src="/static/images/face.png" mode="widthFix"></image>
					</view>
					<view class="text">
						<text class="t">爱添米</text>
						<view class="star_box">
							<view class="star">
								<image src="/static/images/star.png" mode="widthFix"></image>
								<image src="/static/images/star.png" mode="widthFix"></image>
								<image src="/static/images/star.png" mode="widthFix"></image>
								<image src="/static/images/star.png" mode="widthFix"></image>
								<image src="/static/images/star2.png" mode="widthFix"></image>
							</view>
							<text class="fs">4.7</text>
							<view class="price">
								<text>￥44</text>
								<text> / 人</text>
							</view>
						</view>
						<view class="ts">
							<image src="/static/images/icon_ms@2x.png" mode="widthFix"></image>
							<text>湘菜，烧烤，火锅</text>
						</view>
					</view>
				</view>
				
				
				<!-- 店铺简介： -->
				<view class="dpjj">
					<view class="t">
						<image src="../../static/images/icon_menu@2x.png" mode="widthFix"></image>
						<text>店铺简介：</text>
					</view>
					<text class="s">本店是以湘菜为主的地道菜馆。。。本店是以湘菜为主的地道菜。。。。。</text>
				</view>
				
				
				
				<!-- 买单 -->
				<view class="maidan">
					<view class="text">
						<view class="time">
							<text>营业中</text>
							<text>11：00-02：30</text>
							<image src="/static/images/ck_ion01@2x.png" mode="widthFix"></image>
						</view>
						<view class="desc">
							<text>宝安区中熙商业大厦2号（沙井京基百纳5楼）据您步行660m，需...</text>
							<image src="/static/images/ck_ion01@2x.png" mode="widthFix"></image>
						</view>
					</view>
					
					<button>买单</button>
				</view>
				
				
				
			</view>
		</view>
		
		
		
		
		
		<!-- tab -->
		<view class="tab">
			<text class="active">商品</text>
			<text>新品推荐</text>
		</view>
				
			
			
		<!-- list	 -->
		<view class="list">
			
			<view class="list_item">
				<image src="/static/images/face.png"></image>
				<view class="text">
					<text class="t">卫龙_魔芋爽</text>
					<text class="s">100%好评</text>
					<view class="price">
						<text class="xj">45</text>
						<text class="yj">96</text>
					</view>
				</view>
				<view class="btns">
					<button>抢购</button>
					<text>已售77</text>
				</view>
			</view>
			
			<view class="list_item">
				<image src="/static/images/face.png"></image>
				<view class="text">
					<text class="t">卫龙_魔芋爽</text>
					<text class="s">100%好评</text>
					<view class="price">
						<text class="xj">45</text>
						<text class="yj">96</text>
					</view>
				</view>
				<view class="btns">
					<button>抢购</button>
					<text>已售77</text>
				</view>
			</view>
			
			
			<view class="list_item">
				<image src="/static/images/face.png"></image>
				<view class="text">
					<text class="t">卫龙_魔芋爽</text>
					<text class="s">100%好评</text>
					<view class="price">
						<text class="xj">45</text>
						<text class="yj">96</text>
					</view>
				</view>
				<view class="btns">
					<button>抢购</button>
					<text>已售77</text>
				</view>
			</view>
			
			
			<view class="list_item">
				<image src="/static/images/face.png"></image>
				<view class="text">
					<text class="t">卫龙_魔芋爽</text>
					<text class="s">100%好评</text>
					<view class="price">
						<text class="xj">45</text>
						<text class="yj">96</text>
					</view>
				</view>
				<view class="btns">
					<button>抢购</button>
					<text>已售77</text>
				</view>
			</view>
			
		</view>		
				

				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">

	page{
		background: #f3f3f3;
	}

	#apps{

		display: flex;
		flex-direction: column;
		
		
		// header
		.header{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			padding: 0 32rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #fff;
			z-index: 1000;
			text-align: center;
			.back{
				position: absolute;
				left: 0rpx;
				top: 0;
				bottom: 0;
				margin: auto;
				height: 88rpx;
				width: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 54rpx;
					height: auto;
				}
			}
			text{
				font-size: 34rpx;
				color: #333;
				font-weight: bold;
			}
		}
		
		
		// .info_img
		.info_img{
			margin-top: 88rpx;
			width: 100%;
			height: auto;
			position: relative;
			z-index: 1;
			image{
				width: 100%;
				height: auto;
			}
		}
		
		
		
		// 商户介绍
		.shjs_box{
			background: #f3f3f3;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			margin-top: -20rpx;
			position: relative;
			z-index: 1;
			border-radius: 20rpx;
			
			.box{
				background: #fff;
				padding: 36rpx 22rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
			}
			
			.logo_box{
				display: flex;
				align-items: center;
				.logo{
					width: 144rpx;
					height: auto;
					image{
						width: 144rpx;
						border-radius: 100px;
						height: auto;
					}
				}
				.text{
					margin-left: 20rpx;
					.t{
						font-size: 48rpx;
						font-weight: bold;
					}
					.star_box{
						margin: 15rpx 0;
						display: flex;
						align-items: center;
						.star{
							display: flex;
							align-items: center;
							image{
								width: 26rpx;
								height: auto;
							}
						}
						.fs{
							font-size: 22rpx;
							color: $index_color;
							font-weight: bold;
							margin: 0 10rpx;
							box-sizing: border-box;
						}
						.price{
							font-size: 22rpx;
							color: #666;
						}
					}
				}
				.ts{
					display: flex;
					align-items: center;
					image{
						width: 40rpx;
						height: auto;
					}
					text{
						font-size: 28rpx;
						color: #333;
						margin-left: 20rpx;
					}
				}
			}
			
		}
		
		
		
		// 店铺简介
		.dpjj{
			display: block;
			margin-top: 30rpx;
			.t{
				display: flex;
				align-items: center;
				image{
					width: 40rpx;
					height: auto;
				}
				text{
					font-size: 28rpx;
					margin-left: 10rpx;
				}
			}
			.s{
				font-size: 28rpx;
				color: #666;
				padding-left: 50rpx;
				padding-top: 10rpx;
				display: block;
				line-height: 40rpx;
			}
		}
		
		
		// 买单
		.maidan{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			line-height: 40rpx;
			.text{
				flex: 1;
				margin-right: 80rpx;
				.time{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #666;
					image{
						width: 12rpx;
						height: auto;
					}
					text{
						margin-right: 20rpx;
					}
				}
				.desc{
					font-size: 24rpx;
					color: #666;
					image{
						width: 12rpx;
						height: auto;
						margin-left: 20rpx;
					}
				}
			}
			
			button{
				width: 120rpx;
				height: 120rpx;
				background:$index_color;
				box-shadow: 0px 10px 14px rgba(224, 79, 66, 0.45);
				border-radius: 50%;
				color: #fff;
				font-size: 34rpx;
				line-height: 120rpx;
				margin: 0 20rpx 20rpx 0;
			}
		}
		
		
		
		// tab
		.tab{
			display: flex;
			align-items: center;
			padding: 10rpx 32rpx;
			box-sizing: border-box;
			text{
				font-size: 32rpx;
				color: #666;
				font-weight: bold;
				margin-right: 40rpx;
				&.active{
					color: #333;
					position: relative;
					&::after{
						content: '';
						background: $index_color;
						width: 80%;
						height: 8rpx;
						border-radius: 100px;
						display: inline-block;
						position: absolute;
						left: 0;
						right: 0;
						bottom: -10rpx;
						margin: auto;
					}
				}
			}
		}
		
		
		
		// list
		.list{
			padding: 32rpx;
			box-sizing: border-box;
			.list_item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 26rpx 20rpx;
				margin-bottom: 20rpx;
				image{
					width: 160rpx;
					height: 160rpx;
					border-radius: 20rpx;
				}
				.text{
					flex: 1;
					margin-left: 30rpx;
					.t{
						font-size: 32rpx;
						font-weight: bold;
						display: block;
						line-height: 30rpx;
					}
					.s{
						font-size: 22rpx;
						color: $index_color;
					}
					.price{
						margin-top: 20rpx;
						.xj{
							font-size: 26rpx;
							color: $index_color;
							font-weight: bold;
							&::before{
								content: '￥';
								font-size: 20rpx;
								color: #666;
								font-weight: normal;
							}
						}
						.yj{
							font-size: 22rpx;
							color: #999;
							margin-left: 20rpx;
							font-weight: bold;
							text-decoration:line-through;
							&::before{
								content: '￥';
								font-size: 22rpx;
								color: #999;
								font-weight: normal;
							}
						}
					}
				}
				
				.btns{
					button{
						width: 120rpx;
						height: 58rpx;
						line-height: 58rpx;
						color: #fff;
						font-size: 32rpx;
						background: linear-gradient(180deg, #DE4335 0%, #F88365 100%);
						box-shadow: 0px 6rpx 12rpx rgba(246, 126, 97, 0.47);
						border-radius: 10rpx;
					}
					text{
						font-size: 22rpx;
						color: #999;
						display: block;
						text-align: center;
						margin-top: 10rpx;
					}
				}
			}
		}
		
		
		
	}
	

</style>
